/***
 * @Author:xxx
 * @Date:2020-08-10 15:21:35
 * @LastModifiedBy:xxx
 * @Last Modified time:2020-08-26 10:51:28
 */

import React, { Component } from 'react';
import './login.css';
import { Form, Input, Button } from 'antd';
import { Link, Redirect } from 'react-router-dom';
import { getToken, deleteToken } from '../../utils/cookies';
import { connect } from 'react-redux';
import { login, setChinaMap } from '../../redux/actions';
import phoneIcon from '../../assets/image/phone.png'
import passwordIcon from '../../assets/image/password.png'
class Login extends Component {

  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  };

  componentDidMount() {
    deleteToken()
  }

  // setMap = (url) =>{
  //   return new Promise(resolve =>{
  //     window.localStorage.setItem('chinaMap','/chinaMap');
  //   })
  // }

  handleOnFinish = (values) => {
    const userMobile = values.user_mobile;
    const userPassword = values.user_password;
    this.setState({ loading: true });
    this.props.login(userMobile, userPassword).then(res => {
      // console.log(res)
      // this.props.setOrgId({org_id:'/chinaMap'})
      window.localStorage.setItem("org_id", res.org_id);
      if (res.state === true) {
        // this.props.history.push('/chinaMap');
        window.localStorage.setItem('chinaMap', '/chinaMap');
        this.props.setChinaMap({ chinaMap: '/chinaMap' })
      } else if (res.state === false) {
        window.localStorage.setItem('chinaMap', '/home');
        this.props.setChinaMap({ chinaMap: '/home' })
        // this.props.history.push('/home')
      } else {
        console.log("出错啦")
      }
      // console.log(res)

      // console.log(window.localStorage.getItem("org_id"))
    }).catch(err => {
      console.log(err);
    });// 调用分发异步action的函数 => 发 登录的异步请求，有了结果后更新状态
    this.setState({ loading: false });

  };

  render() {
    if (getToken()) {
      return <Redirect to='/' />
    }
    return (
      <div className="login">
        <section className="login-content">
          <p className='login-title'>
            矿井钻孔分析仪数据处理软件
          </p>
          <div className="account-login">
            <div className="text-box">
              <h1>账号登录</h1>
            </div>
            <div className="form-login-box">
              <Form
                name="normal_login"
                className="login-form"
                autocomplete="off"
                initialValues={{
                  remember: true,
                }}
                onFinish={this.handleOnFinish}
              >
                <Form.Item
                  name="user_mobile"
                  rules={[
                    {
                      required: true,
                      message: '请输入您的手机号码！',
                    }, {
                      min: 11,
                      message: '手机号码必须为11位',
                    }, {
                      max: 11,
                      message: '手机号码必须为11位',
                    }
                  ]}
                >

                  <Input prefix={<div style={{ display: 'flex', alignItems: 'center' }}><img src={phoneIcon} alt='' /><div style={{ width: 1, height: 16, background: '#35DBFF', margin: '0 10px 0 15px' }}></div></div>} placeholder=" 请输入您的手机号码" />
                </Form.Item>

                <Form.Item
                  name="user_password"
                  rules={[
                    {
                      required: true,
                      message: '请输入登录密码!',
                    }, {
                      min: 6,
                      message: '密码必须大于等于5位'
                    }, {
                      max: 12,
                      message: '密码必须小于等于12位'
                    }, {
                      pattern: /^[a-zA-Z0-9_]+$/,  // pattern正则表达式匹配
                      message: '密码由是字母、数字或下划线组成',
                    }
                  ]}
                >
                  <Input
                    prefix={<div style={{ display: 'flex', alignItems: 'center' }}><img src={passwordIcon} alt='' /><div style={{ width: 1, height: 16, background: '#35DBFF', margin: '0 10px 0 15px' }}></div></div>}
                    type="password"
                    placeholder=" 请输入登录密码"
                  />
                </Form.Item>
                <Form.Item style={{ marginBottom: 20 }}>
                  <Button type="primary" htmlType="submit" className="login-form-button" loading={this.state.loading}>
                    登录
                  </Button>
                </Form.Item>
                <Form.Item style={{ marginBottom: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <Link className="login-form-newuser" to="/signin">注册新用户</Link>
                    <Link className="login-form-forgot" to="/forgetpwd">忘记密码?</Link>
                  </div>
                </Form.Item>
              </Form>
            </div>
          </div>
        </section>
      </div>

    )
  }
};

export default connect(
  state => ({ user: state.user }),  // 传入 一般属性：user
  { login, setChinaMap }   // 传入 函数属性： login
)(Login);



